<!DOCTYPE HTML>
<html>
<body style="background-color: #9E9E9E;">

<div style="margin-left: 300px">

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>

    <canvas id="radialCanvas"></canvas>
    <canvas id="botCanvas"></canvas>

    <div>
        <pre style="font-size: 16px">

图中可以很清楚的看到圆相离或相交时的渐变方式。
下图渐变都是从红色向蓝色：
渐变总是从起始圆开始（包括起始圆内部），朝着结束圆方向，直到遇到结束圆（不包括结束圆内部）。
createRadialGradient(x1,y1,r1, x2,y2,r2)
左图为小圆向大圆渐变，中图为大院向小圆渐变，右图为相离两个圆的渐变。
        </pre>


        <img style="width: 600px;" src="./径向渐变.png"/>
        <div>图来自：<a href="https://www.cnblogs.com/rainke/p/5294039.html">https://www.cnblogs.com/rainke/p/5294039.html</a></div>
    </div>
</div>
<script type="text/javascript">

    //线性渐变
    function drawLinear() {
        var canvas = document.getElementById("myCanvas");
        var cxt = canvas.getContext("2d");
        var grd = cxt.createLinearGradient(10, 50, 150, 50);

        grd.addColorStop(0, "#ffffff");
        grd.addColorStop(1, "#000000");
        cxt.fillStyle = grd;
        cxt.fillRect(10, 50, 150, 50);
    }

    //径向渐变
    function drawRadial() {
        var canvas = document.getElementById("radialCanvas");
        var ctx = canvas.getContext("2d");

        //由内圆和外圆构成
        //半径和坐标相同，将导致完全不可见
        var radgrad = ctx.createRadialGradient(45, 45, 20, 50, 50, 10);
        radgrad.addColorStop(0, '#A7D30C');
        radgrad.addColorStop(0.9, '#019F62');
        //rgba(1,159,98,0) = #00019F62
        // radgrad.addColorStop(1, 'rgba(1,159,98,0)');

        ctx.fillStyle = radgrad;
        ctx.fillRect(0, 0, 150, 150);


    }

    //可以修改为photoshop调色板
    //渐变起始色总是差一点不是设置的值
    function drawBotCanvas(orgColor) {
        var canvas = document.getElementById("botCanvas");
        var cxt = canvas.getContext("2d");
        //对角线性渐变
        //最后一条线纯黑，坐标只能为（0，canvas.height-1）开始，
        //y==canvas.height时，将超出屏幕外
        var or = orgColor >> 16 & 0xff;
        var og = orgColor >> 8 & 0xff;
        var ob = orgColor & 0xff;

        for (var i = 0; i < canvas.height; i++) {

            var grd = cxt.createLinearGradient(0, i, canvas.width, i);
            var ratio = 1 - (i / (canvas.height - 1));

            //ceil的计算如果耗性能，可以改为整数偏移量的方式。并修正超过255或0
            // var off = or/(canvas.heigh-1)
            // var gray = 255-off*i;
            var gray = Math.ceil(255 * ratio);

            //左边起始色是灰色阶，向右逐渐有色。
            var sr = gray;
            var sg = gray;
            var sb = gray;

            var startRgb = "rgb(" + sr + "," + sg + "," + sb + ")";

            //为了实现调色板，向右的结尾颜色，也是动态生成的。
            //比如说，右上角为0xff0000;那么依据其色三个通道逐级降低颜色

            var er = Math.ceil(or * ratio);
            var eg = Math.ceil(og * ratio);
            var eb = Math.ceil(ob * ratio);

            var endRgb = "rgb(" + er + "," + eg + "," + eb + ")";

            // console.log(startRgb);
            // console.log(endRgb);
            grd.addColorStop(0, startRgb);
            grd.addColorStop(1, endRgb);

            cxt.fillStyle = grd;
            cxt.fillRect(0, i, canvas.width, 1);

        }


    }

    drawLinear();
    drawRadial();
    drawBotCanvas(0xff0000);


</script>

</body>
</html>
